<template>
  <!-- 选择API -->
  <div class="container">
    <el-form :model="queryParams" ref="formRef">
      <el-row>
        <el-col :span="7">
          <el-form-item label="数据源" prop="datasourceId">
            <dict-selector
              v-model="queryParams.datasourceId"
              :dictData="datasourceReadOptions"
              placeholder="请选择数据源"
              style="width: 240px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="数据集名称" prop="datasetNameLike">
            <el-input
              v-model="queryParams.datasetNameLike"
              placeholder="请输入数据集名称"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <search-button @click="handleQuery"/>
            <reset-button @click="resetQuery"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      highlight-current-row
      style="margin-top: 10px"
      @row-click="onRowClick"
    >
      <el-table-column label="选择" width="55" align="center">

            <template #default="{ row }">
                <el-radio
                        @change="handleChoose(row)"
                        v-model="chooseId"
                        :label="row.datasetId"
                >{{ "" }}</el-radio>
            </template>

<!--          <el-radio-->
<!--            :value="chooseId"-->
<!--            :label="scope.row.datasetId"-->
<!--            @change="handleChoose(scope.row)"-->
<!--          >{{ "" }}-->
<!--          </el-radio-->
<!--          >-->
      </el-table-column>
      <el-table-column
        label="数据源"
        prop="datasourceId"
        :show-overflow-tooltip="true"
        min-width="100"
      >
        <template #default="scope">
          {{ selectDictLabel(datasourceReadOptions, scope.row.datasourceId) }}
        </template>
      </el-table-column>
      <el-table-column
        label="数据集名称"
        prop="datasetName"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column
        label="SQL模式"
        prop="sqlMode"
        width="100"
        align="center"
      >
        <template #default="scope">
          <yes-no-tag :value="scope.row.sqlMode"/>
        </template>
      </el-table-column>
      <el-table-column
        label="查询SQL"
        prop="selectSql"
        :show-overflow-tooltip="true"
        min-width="200"
      />
    </el-table>
    <div class="pagination">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
// import {mapMutations, mapState} from "vuex";
import {search} from "@slc/api/slc/dataset";
import {debounceWrapper} from "@/utils/zmids";

export default {
  name: "step-xzsjj",
  props: {
    fbOptions: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {
      total: 100,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        datasourceId: "",
        datasetNameLike: "",
      },
      tableData: [],
      datasourceReadOptions: [],
      datasetId:'',
    };
  },
  created() {
    this.getDicts("datasource_read").then((response) => {
      this.datasourceReadOptions = response.data;
    });
    this.handleQuery();
  },
  computed: {
    // chooseId() {
    //    return this.chooseSjjInfo.datasetId
    // },
    chooseId() {
      return   this.datasetId || this.fbOptions.flow.moreNodeInfo[this.fbOptions.flow.currentNodeId]?.datasetId
    }
  },
  methods: {
    // 查询列表
    getList: debounceWrapper(function () {
      search({...this.queryParams, isEnable: "Y"}).then((response) => {
        this.tableData = response.data.list;
        this.total = response.data.total;
      });
    }),
    async handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    onRowClick(row) {
      this.handleChoose(row);
    },
    handleChoose(row) {
      const obj = {
        serviceDesc: `${this.selectDictLabel(this.datasourceReadOptions, row.datasourceId)}-${row.datasetName}`,
        ...row
      }
      this.datasetId = obj.datasetId;
      this.$emit('onChoose', obj);
    },
    resetQuery() {
      this.resetForm("formRef");
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 16px;

  .pagination {
    margin-bottom: 16px;
  }
}
</style>
